<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
<!--Vue容器-->
<div id="root">
    <ul>
        <li v-for="(p,index) in persons" :key="p.id">
            <!--少用这个of-->
            <!--<li v-for="(p,index) of persons" :key="p.id">-->
            序号：{{index}}----姓名：{{p.name}}---年龄：{{p.age}}
            <!--可以遍历对象，可以拿到属性-->
            <span v-for="(str,index02) in p" :key="index02">
                <hr/>
                {{str}}
                <!--比那里String，一个字符字符的读，用的特别少-->
                <!--<span v-for="( str01,index03) in str" :key="index03">-->
                <!--<hr/>-->
                <!--{{str01}}-->
                <!--</span>-->
                <!--遍历指定次数，用的特别少-->
                <!--<span v-for="( num,index04) in 100" :key="index04">-->
                <!--<hr/>-->
                <!--{{num}}-->
                <!--</span>-->
            </span>
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            persons: [
                {name: '张三', id: '1', age: '20'},
                {name: '李四', id: '2', age: '22'},
                {name: '王五', id: '3', age: '56'}
            ]
        },
        methods: {},
        watch: {}
    });

</script>
</body>
</html>